<style>
    .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-block">
                    <input readonly id="username" type="text" name="name" lay-verify="required"  value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">手机</label>
                <div class="layui-input-block">
                    <input id="phone" type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"  value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input id="email" type="email" name="email"  placeholder="请输入邮箱"  value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input id="address" type="text" name="address"  placeholder="请输入地址"  value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input id="password" type="password" name="password"  placeholder="请输入密码"  value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','miniPage'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniPage = layui.miniPage;
        let $ = layui.$

        $.ajax({
            url: '/user/now',
            method: 'get',
            dataType: 'json',
            async: false,
            success: function (resp) {
                let user = resp.data
                console.log(user)
                $('#username').val(user.name)
                $('#phone').val(user.phone)
                $('#email').val(user.email)
                $('#address').val(user.address)
                $('#password').val(user.password)
                let len = $("input[type='radio']").length
                for (let i = 0; i < len; i++) {
                    let r = $("input[type='radio']").eq(i)
                    console.log(r)
                    if (r.val() == user.sex) {
                        r.attr('checked', true)
                    }
                }
                form.render();
            }
        })

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let field = data.field
            $.ajax({
                url: '/user/nowUpdate',
                data: field,
                method: 'post',
                dataType: 'json',
                success: function (resp) {
                    localStorage.setItem('user', JSON.stringify(resp.data))
                    var index = layer.alert('修改成功', function () {
                        layer.close(index);
                        miniPage.hashHome();
                    });
                }
            })
            return false;
        });

    });
</script>